<template>
	<view class="discount">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabIndex === index }" @click="tabIndex = index">{{ item.text }}</view>
		</view>
		<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(i, index) in 3" :key="index">
				<scroll-view class="list-scroll-content" :scroll-y="true" @scrolltolower="scrolltolower">
					<view class="list">
						<view class="box" v-for="(item,index) in listData" :key="index">
							<view class="content">
								<view class="box-left" v-if="item.type==1&&item.status==0">
									<text class="icon">￥</text>
									<view class="num">
										{{Number(item.discount)}}
									</view>
								</view>
								<view class="box-left2" v-if="item.type==1&&item.status==1">
									<text class="icon">￥</text>
									<view class="num">
										{{Number(item.discount)}}
									</view>
								</view>
								<view class="box-left1" v-if="item.type==1&&item.status==2">
									<text class="icon">￥</text>
									<view class="num">
										{{Number(item.discount)}}
									</view>
								</view>
								<view class="box-left" v-if="item.type==2&&item.status==0">
									<view class="num">
										{{item.discount*10}}
									</view>
									<text class="icon">折</text>
								</view>
								<view class="box-left2" v-if="item.type==2&&item.status==1">
									<view class="num">
										{{item.discount*10}}
									</view>
									<text class="icon">折</text>
								</view>
								<view class="box-left1" v-if="item.type==2&&item.status==2">
									<view class="num">
										{{item.discount*10}}
									</view>
									<text class="icon">折</text>
								</view>
								<view class="right">
									<view class="box-center">
										<view class="text">
											{{item.title}}
										</view>
										<view class="time">
											{{item.use_starttime}}~{{item.use_endtime}}
										</view>
									</view>
									<view class="box-right">
										<view class="text" @click="useCoupon()" v-if="item.status==0">
											去使用
										</view>
										<view class="text2" v-if="item.status==1">
											已使用
										</view>
										<view class="text1" v-if="item.status==2">
											已失效
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="box">
							<view class="content">
								<view class="box-left">
									<view class="num">
										{{item.discount}}
									</view>
									<text class="icon">折</text>
									
								</view>
								<view class="right">
									<view class="box-center">
										<view class="text">
											折扣优惠券
										</view>
										<view class="time">
											{{item.time}}
										</view>
									</view>
									<view class="box-right">
										<view class="text">
											去使用
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="box">
							<view class="content">
								<view class="box-left1">
									<text class="icon">￥</text>
									<view class="num">
										{{item.discount}}
									</view>
								</view>
								<view class="right">
									<view class="box-center">
										<view class="text">
											立减优惠券
										</view>
										<view class="time">
											{{item.time}}
										</view>
									</view>
									<view class="box-right">
										<view class="text1">
											已失效
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="box">
							<view class="content">
								<view class="box-left2">
									<text class="icon">￥</text>
									<view class="num">
										{{item.discount}}
									</view>
								</view>
								<view class="right">
									<view class="box-center">
										<view class="text">
											立减优惠券
										</view>
										<view class="time">
											{{item.time}}
										</view>
									</view>
									<view class="box-right">
										<view class="text2">
											已使用
										</view>
									</view>
								</view>
							</view>
						</view> -->
					</view>
					<view class="none"  v-if="listData.length==0">暂无数据~</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import service from '@/store/service.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				page: 1,
				lastPage: 1,
				listData: [],
				navList: [{
						text: '未使用',
						state: '0'
					},
					{
						text: '已使用',
						state: '1'
					},
					{
						text: '已失效',
						state: '2'
					}
				]
			};
		},
		onLoad(option) {
			this.getList(1)
		},
		onShow: function() {},

		methods: {
			useCoupon() {
				uni.switchTab({
					url: '../main/index'
				})
			},
			getList(e) {
				var self = this;
				self.$http
					.post(service.api.discount.getMyCouponList, {
						page: self.page,
						status: self.navList[self.tabIndex].state
					})
					.then(function(res) {
						console.log(res, 233);
						var list = res.data.data;
						if (e == 1) {
							self.listData = list;
						} else if (e == 2) {
							self.listData = self.listData.concat(list);
						}
						self.lastPage = Math.ceil(res.data.total / res.data.per_page);
					});
			},
			scrolltolower(e) {
				console.log('滚动到底部==>>', e);
				let that = this;
				if (that.page < that.lastPage) {
					that.page = that.page + 1;
					that.getList(2);
				} else {
					that.$api.msg('没有更多数据了~');
				}
			},
			//swiper 切换
			changeTab(e) {
				this.tabClick(e.target.current);
			},
			tabClick(index) {
				this.page = 1;
				this.tabIndex = index;
				this.getList(1);
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;

		.discount {
			height: 100%;
			position: fixed;
			z-index: 100;
			width: 100%;
		}
	}

	.list {
		padding: 30upx;

		.box {
			width: 690upx;
			height: 194upx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 12upx;
			margin-bottom: 30upx;

			.content {
				display: flex;
				justify-content: space-around;

				.box-left,
				.box-left1,
				.box-left2 {
					width: 212upx;
					height: 194upx;
					background: #F81149;
					box-shadow: 3upx 0px 8upx 1px #FCE1E8;
					border-radius: 12upx 0px 0px 12upx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;



					.icon {
						margin-top: 20upx;
						height: 49upx;
						font-size: 40upx;
						// font-weight: bold;
						color: #FFFFFE;
						line-height: 59upx;
						text-align: center;
					}

					.num {
						font-size: 80upx;
						font-weight: bold;
						color: #FFFFFE;
						line-height: 72upx;
					}

				}

				.box-left1 {
					background: #c1c1c1;
				}

				.box-left2 {
					background: #F86A8C;
				}


				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.box-center {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-right: 20upx;

					.text {
						font-weight: bold;
						color: #242424;
						font-size: 36upx;
						margin-bottom: 10upx;
					}

					.time {
						font-size: 24upx;
						color: #999999;
						transform: scale(0.9);
					}
				}

				.box-right {
					display: flex;
					align-items: center;
					justify-content: center;

					.text,
					.text1,
					.text2 {
						width: 140upx;
						height: 58upx;
						background: #FFFFFF;
						border: 2upx solid #F81149;
						border-radius: 29upx;
						text-align: center;
						margin-right: 22upx;
						font-size: 32upx;
						font-weight: 500;
						color: #F81149;
						text-align: center;
					}

					.text1 {
						border: 2upx solid #C1C1C1;
						color: #C1C1C1;
					}

					.text2 {
						border: 2upx solid #F86A8C;
						color: #F86A8C;
					}
				}
			}
		}
	}



	.swiper-box {
		height: 100%;
		padding-top: 90upx;
		box-sizing: border-box;
		padding-bottom: 90upx;
	}

	uni-swiper-item {
		overflow: auto;
	}

	.navbar {
		width: 100%;
		display: flex;
		height: 40px;
		background: #fff;
		// box-shadow: 0px 4upx 8upx #dcdfe6;
		position: fixed;
		z-index: 200;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #303133;
			position: relative;

			&.current {
				color: #f81149;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 50px;
					height: 0;
					border-bottom: 4upx solid #f81149;
				}
			}
		}
	}

	.list-scroll-content {
		height: 100%;
	}
	.none{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200upx;
	}
</style>
